<template>
  <div>
    <van-nav-bar title="选择城市" left-text="返回" left-arrow @click-left="onClickLeft" />
    <!-- 城市列表 -->
    <van-index-bar :index-list="indexList">
      <template v-for="(item, key, index) in indexBar">
        <van-index-anchor :index="key" :key="key" />
        <template v-for="val in item">
          <van-cell @click="selectCity(val.cityId, val.name)" :title="val.name" :key="val.cityId" />
        </template>
      </template>
    </van-index-bar>
  </div>
</template>

<script>
import { getCitiesInfoApi } from '@/api/cityApi'
export default {
  data() {
    return {
      indexBar: {}
    }
  },
  computed: {
    indexList() {
      return Object.keys(this.indexBar)
    }
  },
  async created() {
    // console.log(this.$store.getters.cityid, this.$store.getters.cityname)
    let ret = await getCitiesInfoApi()
    this.indexBar = ret
  },
  methods: {
    onClickLeft() {
      this.$router.back()
    },
    selectCity(id, name) {
      this.$store.commit('city/setCity', { cityid: id, cityname: name })
      this.$dialog
        .alert({
          message: '弹窗内容',
          confirmButtonText: '跳转一下'
        })
        .then(_ => {
          // 当关闭弹框时会触发
          this.$router.push('/cinemas')
        })
    }
  }
}
</script>

<style lang="scss" scoped></style>
